<template>
	<view class="container" style="height: 100%;width: 100%;overflow:hidden;position: relative;">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="预约单添加" @clickLeft="back"/>
		<view style="height: 100%;width: 100%;overflow: hidden;position: relative;padding: 0 16px;box-sizing: border-box;">
			<view style="padding-top: 15px;" class="title">
				<text>{{sysInfo.buildingName}}</text>
				<text style="margin: 0 8px;">—</text>
				<text>{{sysInfo.labName}}</text>
			</view>
			<view class="title">
				<text>申请人</text>
				<text style="margin-left: 12px;">{{sysInfo.userName}}</text>
			</view>
			<view style="width: 100%;margin: 0px auto;overflow: hidden">
				<form class="form-warp">
					<view style="margin-top: 16px;" class="textSize">
						开始时间
					</view>
					<view class="input-group">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<uni-datetime-picker class="time" type="date" :clear-icon="false" v-model="workDate" @change="maskDateClick" />
							<uni-datetime-picker :hide-second='false' class="time" type="time" :clear-icon="false" :value="workBenTime" @change="maskBenTimeClick" />
						</view>
					</view>
					<view style="margin-top: 16px;" class="textSize">
						结束时间
					</view>
					<view class="input-group">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<uni-datetime-picker class="time" type="date" :clear-icon="false" v-model="workDate" @change="maskDateClick" />
							<uni-datetime-picker :hide-second='false' class="time" type="time" :clear-icon="false" :value="workEndTime" @change="maskEndTimeClick" />
						</view>
					</view>
					<!-- 所选物料 -->
					<view style="width: 100%;">
						<view style="display: flex;margin-top: 5px;">
							<view class="add_title">化学品名</view>
							<view class="add_titleNumber">预约数量</view>
						</view>
						<scroll-view scroll-y class="scroll-content" :style="{'height': allheight,'overflow-y': 'auto',marginTop: '0px'}" >
							<view style="position: relative;" v-for="(item,index) in selectMaterialList">
								<view v-if="item.demo8" class="materialPopUp">
									<view class="success_title">
										<view>
											<image style="max-width: 23px;max-height: 23px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/prompt.png" mode=""></image>
											<text class="success_text">提示</text>
										</view>
										<view>
											<image @click="close()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
										</view>
									</view>
									<view class="success_content">
										{{editMaterial.fgoodname}}库存剩余{{editMaterial.fqty}}ml，预约量超过库存。
									</view>
								</view>
								<view v-if="item.demo8" class="triangle"></view>
								<view class="material_line">
									<view style="width: 50%;">{{item.fgoodname}}</view>
									<view style="width: 50%;display: flex;align-items: center;">
										<view @click="editMaterialReduce(item)" class="reduce_btn">
											<image style="max-width: 20px;max-height: 20px;vertical-align: middle;" src="../../static/image/reduce.png" mode=""></image>
										</view>
										<input @input="editMaterialChange(item)" type="number" v-model='item.fretqty'  class="text_btn">
										</input>
										<view @click="editMaterialAdd(item)" class="add_btn">
											<image style="max-width: 20px;max-height: 20px;vertical-align: middle;" src="../../static/image/add.png" mode=""></image>
										</view>
									</view>
								</view>
							</view>
							<view style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 50px;" v-if="selectMaterialList.length == 0">
								暂无数据，请添加
							</view>
						</scroll-view>
					</view>
				</form>
			</view>
			<view style="display: flex;padding: 16px 4% 16px 4%;justify-content: space-between">
				<view @click="continueAdd()" class="formcencel">
					继续添加
				</view>
				<view class="formconfirm" @click="formconfirm">
					提交
				</view>
			</view>
		</view>
		<!-- 确定取消弹窗 -->
		<view v-if="isOut" class="shadow"></view>
		<view v-if="isOut" class="out_all">
			<view class="out_title">预约单添加</view>
			<view class="out_text">
				确定提交该预约申请吗？
			</view>
			<view style="margin-top: 50px;display: flex;justify-content: space-between;">
				<view class="cancel" @click="cancelShadow()">取消</view>
				<view class="confirm" @click="confirmShadow()">确定</view>
			</view>
		</view>
		<!-- 成功失败提示 -->
		<view v-if="isSuccess == 0 || isSuccess == 1" :class="isSuccess == 0 ? 'success' : 'error'">
			<view class="success_title">
				<view>
					<image v-show="isSuccess == 0" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<image v-show="isSuccess == 1" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="successClose()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				allheight: 0,
				sysInfo: null, // 系统变量
				workDate: '',  // 日期
				workBenTime: "",  // 开始时间
				workEndTime: "", // 结束时间
				selectMaterialList:[], // 所选物料列表
				editMaterial: {},
				isPrompt: false, //是否提示
				isSuccess: null, // 报错/成功提示内容
				successContent: '', // 报错/成功提示内容
				isOut: false, // 取消确定弹窗
			}
		},
		onLoad(e) {
			that = this;
			that.sysInfo = this.$sys.getSysInfo();
			console.log('that.sysInfo',that.sysInfo)
			let ds
			let addTime
			try {
				ds = JSON.parse(decodeURIComponent(e.item));
				addTime = JSON.parse(decodeURIComponent(e.addTime));
			} catch (error) {}
			console.log('ds',ds)
			console.log('addTime',addTime)
			if(addTime){
				that.workDate = addTime.date
				that.workBenTime = addTime.ben
				that.workEndTime = addTime.end
			}else{
				that.workDate = that.getDate(new Date()).split(' ')[0]
				that.workBenTime= that.getDate(new Date()).split(' ')[1]  // 开始时间
				that.workEndTime= "23:59" 
			}
			uni.getSystemInfo({
			    success: function (res) {
					that.allheight = (res.windowHeight - 460) + 'px'
				}
			});
			// 所选物料
			that.selectMaterialList = ds
		},
		methods: {
			// 添加物料取消
			submit(){
			},
			// 物料减
			editMaterialReduce(item){
				item.fretqty -= 1
				console.log('item',item)
				that.editMaterial = item
				if(item.fretqty > item.fqty){
					item.fretqty = item.fqty
					that.prompt(item)
				}
			},
			// 物料内容修改
			editMaterialChange(item){
				console.log('item',item)
				that.editMaterial = item
				if(item.fretqty > item.fqty){
					item.fretqty = item.fqty
					that.prompt(item)
				}
			},
			// 物料加
			editMaterialAdd(item){
				console.log('item',item)
				that.editMaterial = item
				item.fretqty += 1
				if(item.fretqty > item.fqty){
					item.fretqty = item.fqty
					that.prompt(item)
				}
			},
			prompt(item){
				item.demo8 = true
				// that.isPrompt = true
				setTimeout(function(){
					let temp = []
					that.selectMaterialList.forEach(e =>{
						if(e.id == that.editMaterial.id){
							e.demo8 = false
						}
						temp.push(e)
					})
					that.selectMaterialList= Object.assign([], temp);
				},2000)
			},
			close(){
				let temp = []
				that.selectMaterialList.forEach(e =>{
					if(e.id == that.editMaterial.id){
						e.demo8 = false
					}
					temp.push(e)
				})
				console.log('temp',temp)
				that.selectMaterialList= Object.assign([], temp);
			},
			// 日期改变
			maskDateClick(e){
				console.log('e',e)
				that.workDate = e
			},
			// 开始时间改变
			maskBenTimeClick(e){
				console.log('e',e.substring(0,6))
				that.workBenTime = e.substring(0,5)
			},
			// 结束时间改变
			maskEndTimeClick(e){
				console.log('e',e)
				that.workEndTime = e.substring(0,5)
			},
			getDate(e) {
					const date = new Date(e)
					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					m = m < 10 ? ('0' + m) : m;
					var d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					var h = date.getHours();
					var minute = date.getMinutes();
					minute = minute < 10 ? ('0' + minute) : minute;
					return y + '-' + m + '-' + d +' ' + h + ':' + minute
			},
			// 继续添加
			continueAdd(){
				let temp = {
					date: that.workDate,
					ben: that.workBenTime,
					end: that.workEndTime,
				}
				that.$util.redirectTo('scence/index?item=' + encodeURIComponent(JSON.stringify(temp)) +"&addmaterial=" + encodeURIComponent(JSON.stringify(that.selectMaterialList)));
				// this.$util.navigateBack(1)
			},
			successClose(){
				that.isSuccess = null
			},
			// 确认弹窗
			formconfirm(){
				if(that.workEndTime > that.workBenTime){
					that.isOut = true
				}else{
					that.isSuccess = 1
					that.successContent ='开始时间必须小于结束时间'
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				}
			},
			// 取消
			cancelShadow(){
				that.isOut = false
			},
			// 确认
			confirmShadow(){
				that.isOut = false
				console.log('that.selectMaterialList',that.selectMaterialList)
				if(that.selectMaterialList.length > 0){
					that.$http.get('data/area/getFbillno', {
						flag: 2026
					}).then(e => {
						console.log('workDate',that.workDate)
						let temp ={
							fbillno:e,
							fbillstate:1,
							fbilltype:1,
							fmancount:1,
							fplanusedate: new Date(that.workDate+' 00:00:00'),
							fpointNo:that.sysInfo.labNo,
							frealbegtime:new Date(that.workDate+' '+that.workBenTime),
							frealendtime:new Date(that.workDate+' '+that.workEndTime),
							fsiteNo: that.sysInfo.fsiteNo,
							fusedate: new Date(),
							fuseuser: that.sysInfo.userId,
							details:that.selectMaterialList
						}
						console.log('temp',temp)
						that.$http.postData('material/useHead/create',temp).then(e => {
							that.isSuccess = 0
							that.successContent ='提交成功'
							setTimeout(function(){
								that.isSuccess = null
								that.selectMaterialList = []
								that.back()
							},2000)
						}).catch(()=>{
							that.isSuccess = 1
							that.successContent ='提交失败'
							setTimeout(function(){
								that.isSuccess = null
							},2000)
						})
						
					}).catch(()=>{
						that.isSuccess = 1
						that.successContent ='提交失败'
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}else{
					that.isSuccess = 1
					that.successContent ='所选化学品不能为空！'
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				}
				
			},
			
			back() {
				let temp = {
					date: that.workDate,
					ben: that.workBenTime,
					end: that.workEndTime,
				}
				that.$util.redirectTo('scence/index?item=' + encodeURIComponent(JSON.stringify(temp)) +"&addmaterial=" + encodeURIComponent(JSON.stringify(that.selectMaterialList)));
			},
		}
	}
</script>

<style>
	.triangle{
		width:0px;
		height:0px;
		border-top:14px solid transparent;
		border-bottom:14px solid #E3EDF7;
		border-left:14px solid transparent;
		border-right:14px solid transparent;
		position: absolute;
		top: 42px;
		right: 34px;
		z-index: 2;
	}
	.materialPopUp{
		width: 188px;
		height: 75px;
		position: absolute;
		top: 68px;
		right: 20px;
	/* 	top: -44px;
		right: 20px; */
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 12px;
		z-index: 2;
		padding: 15px;
	}
	.textSize {
	    font-family: 'PingFang SC';
	    font-style: normal;
	    font-weight: 500;
	    font-size: 14px;
	    line-height: 22px;
	    display: flex;
	    align-items: center;
	    color: #8B9EB0 !important;
	}
	.formcencel{
		width: 45%;
		height: 56px;
		line-height: 56px;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 17px;
		/* identical to box height, or 100% */
		text-align: center;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.formconfirm{
		width: 45%;
		height: 56px;
		line-height: 56px;
		background: #0F7CEA;
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 17px;
		/* identical to box height, or 100% */
		text-align: center;
		color: #FFFFFF;
	}
	.submit{
		width: 100%;
		height: 51px;
		line-height: 51px;
		text-align: center;
		background: #0F7CEA;
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		color: #FFFFFF;
	}
	.add_btn{
		width: 24px;
		height: 36px;
		text-align: center;
		line-height: 36px;
		background: #E3EDF7;
		box-shadow: 0.781826px 0.781826px 1.56365px rgba(114, 142, 171, 0.1), -2.34548px -2.34548px 7.81826px #FFFFFF, 1.56365px 1.56365px 7.81826px rgba(111, 140, 176, 0.41);
		border-radius: 0px 4px 4px 0px;
	}
	.text_btn{
		width: 81px;
		height: 36px;
		text-align: center;
		line-height: 36px;
		background-color: rgba(255, 255, 255, 0.45);
		box-shadow: -2.34548px -2.34548px 7.81826px #FFFFFF, inset 1.56365px 1.56365px 5.47278px #C1D5EE;
	}
	.reduce_btn{
		width: 24px;
		height: 36px;
		text-align: center;
		line-height: 36px;
		background: #E3EDF7;
		box-shadow: 0.781826px 0.781826px 1.56365px rgba(114, 142, 171, 0.1), -2.34548px -2.34548px 7.81826px #FFFFFF, 1.56365px 1.56365px 7.81826px rgba(111, 140, 176, 0.41);
		border-radius: 4px 0px 0px 4px;
	}
	.add_title{
		width: 60%;
		/* Chart Title */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 22px;
		color: rgba(17, 58, 98, 0.45);
		padding: 8px 0 2px 16px;
	}
	.add_titleNumber{
		width: 40%;
		/* Chart Title */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: rgba(17, 58, 98, 0.45);
		padding: 8px 0 2px 0px;
	}
	.material_title{
		width: 50%;
		/* Chart Title */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: rgba(17, 58, 98, 0.45);
		padding: 8px 0 2px 16px;
	}
	.material_titleNumber{
		width: 30%;
		/* Chart Title */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: rgba(17, 58, 98, 0.45);
		padding: 8px 0 2px 0px;
	}
	.material_line{
		display: flex;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 4px;
		height: 56px;
		line-height: 56px;
		margin: 2px 0 12px 0;
		padding-left: 16px;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
	}
	.addmaterial_line{
		display: flex;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 4px;
		height: 56px;
		line-height: 56px;
		margin-top: 2px;
		padding-left: 16px;
		/* Card Float */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
	}
	.control{
		display: flex;
		justify-content: center;
		padding-top: 20px;
	}
	
	.control_Btn{
		width: 72px;
		height: 26px;
		background: #E3EDF7;
		box-shadow: 2.60609px 2.60609px 5.21217px rgba(114, 142, 171, 0.1), -7.81826px -7.81826px 26.0609px #FFFFFF, 5.21217px 5.21217px 26.0609px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		line-height: 26px;
		text-align: center;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #113A62;
		opacity: 0.65;
		padding: 8px 25px;
	}
	
	.control_Down{
		width: 72px;
		height: 26px;
		background: #E3EDF7;
		box-shadow: -4px -4px 20px #FFFFFF, inset 4px 4px 14px #C1C8CF;
		border-radius: 5px;
		line-height: 26px;
		text-align: center;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #113A62;
		padding: 8px 25px;

	}
	
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: left;
		padding-top: 10px;
	}
	.form-warp {
		zoom: 1;
	}
	
	.form-warp:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20'
	}
	
	.input-group {
		position: relative;
		margin-top: 8px;
	}
	
	.input-group .uni-icons {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 48rpx;
		top: 20rpx;
		border-right: 1rpx solid #dedede;
		padding-right: 10rpx;
		font-size: 30rpx !important;
	}
	
	.input-group input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 25px;
		background: #ffffff;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	
	/*解决光标大小不一致问题*/
	.uni-input-input {
		height: 100%;
		line-height: normal;
	}
		
	.cabAll{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-x: auto;
	}
	.cabClick{
		background: #E3EDF7;
		box-shadow: inset -4px -4px 9px rgba(255, 255, 255, 0.6), inset 8px 8px 16px #C5D7EE;
		border-radius: 12px 0px 0px 12px;
		height: 143px;
		width: 40px;
		white-space: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px 0;
		letter-spacing: 10px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
	}
	.cab{
		background: #E3EDF7;
		/* Card Float */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 12px 0px 0px 12px;
		height: 143px;
		width: 40px;
		white-space: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px 0;
		letter-spacing: 10px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
	}
	.cabImg{
		max-width: 12px;
		max-height: 16px;
		box-shadow: inset 0px 1px 1px #5A6571;
		margin-right: 10px;
	}
	
	.cabText{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 26px;
		/* identical to box height, or 144% */
		color: #113A62;
		opacity: 0.7;
		display: flex;
		flex-direction: column;
		writing-mode:vertical-lr
	}
	
	.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
		.scroll-box {
			padding: 24rpx;
			display: inline-block;
			width: 300rpx;
			height: 172rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4rpx 0px #ACACAC;
			border-radius: 8rpx;
			border: 1rpx solid #ACACAC;
		}
	
		.scroll-box:last-child {
			margin-right: 0;
		}	
		
		/* 遮罩层 */
		.shadow{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: #FAFCFD;
			opacity: 0.85;
		}
		
		.next{
			width: 100%;
			height: 48px;
			text-align: center;
			line-height: 48px;
			background: #E3EDF7;
			/* outer2 */
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 20px;
			letter-spacing: -0.4px;
			color: #8B9EB0;
			margin-top: 60px;
		}
		.pwd_title{
			width: 100%;
			text-align: center;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 20px;
			line-height: 40px;
			/* identical to box height, or 167% */
			color: #113A62;
			margin-top: 15px;
		}
		.pwd_all{
			width: 85%;
			margin: auto;
			height: 262px;
			background: #E3EDF7;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 16px;
		}
		.success_title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			/* padding: 18px; */
		}
		.success_text{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			line-height: 22px;
			color: #113A62;
			margin-left: 10px;
		}
		.success_content{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 18px;
			color: #113A62;
			margin-top: 6px;
		}
		
		.success{
			width: 80%;
			height: 116px;
			background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 16px;
		}
		.error{
			width: 80%;
			height: 116px;
			background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 16px;
		}
		.success_title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			/* padding: 18px; */
		}
		.success_text{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			line-height: 22px;
			color: #113A62;
			margin-left: 10px;
		}
		.success_content{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 18px;
			color: #113A62;
			margin-top: 6px;
		}
		
		.out_all{
			width: 85%;
			margin: 0 auto;
			height: 200px;
			background: #E3EDF7;
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			position: absolute;
			left: 0;
			right: 0;
			top: 28%;
			bottom: 0;
			padding: 16px;
		}
		.out_title{
			width: 100%;
			text-align: center;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 20px;
			line-height: 40px;
			/* identical to box height, or 167% */
			color: #113A62;
			margin-top: 15px;
		}
		.out_text{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 18px;
			line-height: 28px;
			color: #113A62;
			margin: 12px 0 0 10px;
		}
		
		.cancel{
			width: 45%;
			height: 48px;
			line-height: 48px;
			text-align: center;
			background: #E3EDF7;
			/* outer2 */
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 20px;
			letter-spacing: -0.4px;
			color: #8B9EB0;
		}
		.confirm{
			width: 45%;
			height: 48px;
			line-height: 48px;
			text-align: center;
			background: #E3EDF7;
			/* outer2 */
			box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
			border-radius: 4px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 20px;
			letter-spacing: -0.4px;
			color: #8B9EB0;
		}
</style>
